<template>
  <div class="wode">
    <div class="file">
      <img class="tx_img" :src="image" alt="这是头像" />
      <!-- 上传头像 -->
      <el-upload
        class="upload-demo tx_but"
        action="http://localhost:8090/user/upLoadImg"
        :data="user.id"
        :show-file-list="false"
        :on-success="su"
        :before-upload="beforeImgUpload"
      >
        <el-button size="small" type="primary">更换头像</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过2M
        </div>
      </el-upload>
      <!-- 上传简历 -->
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8090/user/upLoadResume"
        :on-success="suR"
        :show-file-list="false"
        :data="user.id"
        :before-upload="beforeResumeUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将简历拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png/pdf文件，且不超过2MB
          <!-- <a href="resume">我的简历</a> -->
          <el-link :href="resume" target="_blank"
            ><i class="el-icon-view el-icon--right">我的简历</i>
          </el-link>
        </div>
      </el-upload>
    </div>

    <div class="biaodan">
      <div class="biaodan_left">
        <el-tag class="element_b">姓&nbsp;名</el-tag>
        <el-input
          class="element_p"
          placeholder="姓名"
          v-model="user.name"
          clearable
        >
        </el-input>
        <el-tag class="element_b">手机号</el-tag>
        <el-input
          class="element_p"
          oninput="value=value.replace(/\D/g,'')"
          placeholder="请输入手机号"
          maxlength="11"
          v-model="user.iphone"
          clearable
        >
        </el-input>
        <el-tag class="element_b">密&nbsp;码</el-tag>
        <el-input
          class="element_p"
          placeholder="请输入密码"
          v-model="user.password"
          oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
          show-password
        ></el-input>
        <el-tag class="element_b">确认密码</el-tag>
        <el-input
          class="element_p"
          placeholder="请确认密码"
          v-model="user.rePassword"
          oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
          show-password
        ></el-input>
        <el-button class="element_but" type="primary" round @click="changeInfo"
          >确认修改</el-button
        >
      </div>
      <!-- 中间分割线 -->
      <div class="v_line"></div>
      <div class="biaodan_right">
        <div class="wantwork">
          <el-tag class="element_b">期望岗位1</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-input
            class="element_p"
            placeholder="请输入期望职位"
            v-model="want.work"
            clearable
            style="width:219px"
          >
          </el-input><br>
          <el-tag class="element_b">期望月薪 /元</el-tag>&nbsp;
          <el-input
            class="element_p"
            type="text"
            placeholder="请输入最期望薪资"
            v-model="want.sal"
            oninput="value=value.replace(/[^\d]/g,'')"
            clearable
            style="width:219px"
          >
          </el-input>
        </div>
        <div class="wantwork">
          <el-tag class="element_b">期望岗位2</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-input
            class="element_p"
            placeholder="请输入期望职位"
            v-model="want.work1"
            clearable
            style="width:219px"
          >
          </el-input><br>
          <el-tag class="element_b">期望月薪 /元</el-tag>&nbsp;
          <el-input
            class="element_p"
            type="text"
            placeholder="请输入最期望薪资"
            v-model="want.sal1"
            oninput="value=value.replace(/[^\d]/g,'')"
            clearable
            style="width:219px"
          >
          </el-input>
        </div>

        <el-tag class="element_b">期望城市</el-tag>
        <el-input
          class="element_p"
          placeholder="请输入期望城市"
          v-model="want.city"
          clearable
        >
        </el-input>

        <el-tag class="element_b">期望行业</el-tag>
        <el-input
          class="element_p"
          placeholder="请输入期望行业"
          v-model="want.content"
          clearable
        >
        </el-input>
        <el-button class="element_but" type="primary" round @click="yixian"
          >确认意向</el-button
        >
      </div>
    </div>
  </div>
</template>
<style>
.wode {
  width: 1200px;
  height: 520px;
  margin-top: 50px;
  margin-left: calc(50vw - 600px);
  border: 1px solid #909399;
  border-radius: 25px;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.file {
  width: 390px;
  border-right: 1px solid #909399;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.tx_img {
  height: 150px;
  width: 150px;
  object-fit: cover;
  border-radius: 50%;
}
.tx_but {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -30px;
  align-items: center;
}
.biaodan {
  height: 460px;
  width: 780px;
  margin: 30px 0px;
  /* border: 1px solid #909399; */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.biaodan_left {
  width: 330px;
}
.element_b {
  margin-top: 15px;
}
.element_p {
  margin-top: 8px;
}
.element_but {
  width: 105px;
  margin-top: 30px;
  margin-left: calc(50% - 53px);
}
.v_line {
  width: 2px;
  margin: 10px -9px;
  border-left: 1px solid #909399;
  border-right: 1px solid #909399;
}
.biaodan_right {
  width: 330px;
}
.wantwork{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
<script>
export default {
  data() {
    return {
      // upLoadImg: 'http://localhost:8090/user/upLoadImg',
      image:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      file: null,
      user: {
        id: { id: this.$store.state.userId },
        name: "teo-jj",
        iphone: "8980881",
        password: "123",
        rePassword: "123",
      },
      want: {
        work: "Java",
        city: "广州",
        sal: "3500",
        content: "互凉网",
        work1: "测试",
        sal1: "3500",
      },
      resume: null,
    };
  },
  methods: {
    // 修改意向
    yixian() {
      var id = this.$store.state.userId;
      var url = this.$store.state.ip + "/user/changeWant";
      // 参数
      let param = new URLSearchParams();
      param.append("id", id);
      param.append("work", this.want.work);
      param.append("city", this.want.city);
      param.append("sal", this.want.sal);
      param.append("content", this.want.content);
      param.append("work1", this.want.work1);
      param.append("sal1", this.want.sal1);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        if (res.data == 1) {
          this.$notify({
            title: "工作意向",
            message: "已修改成功！",
            type: "success",
          });
        }
      });
    },
    changeInfo() {
      if (this.user.password == this.user.rePassword) {
        var id = this.$store.state.userId;
        var url = this.$store.state.ip + "/user/changeInfo";
        // 参数
        let param = new URLSearchParams();
        param.append("id", id);
        param.append("name", this.user.name);
        param.append("iphone", this.user.iphone);
        param.append("paw", this.user.password);
        this.$axios({
          method: "post",
          url: url,
          data: param,
        }).then((res) => {
          if (res.data == 1) {
            this.$notify({
              title: "账号信息",
              message: "已修改成功！",
              type: "success",
            });
          }
        });
      } else {
        this.$notify({
          title: "提示",
          message: "密码不一致，请重新输入！",
          // duration: 0
        });
      }
    },
    // 获取用户信息
    getUserInfo() {
      var id = this.$store.state.userId;
      console.log("获取userId:", id);
      var url = this.$store.state.ip + "/user/getUserInfo";
      // 参数
      let param = new URLSearchParams();
      param.append("id", id);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        console.log(res.data);
        this.image =
          "https://gra-1257734071.cos.ap-guangzhou.myqcloud.com/img-user/" +
          res.data.image;
        this.user.name = res.data.name;
        this.user.iphone = res.data.iphone;
        this.user.password = res.data.passWord;
        this.user.rePassword = res.data.passWord;
        this.want.work = res.data.work;
        this.want.city = res.data.city;
        this.want.sal = res.data.sal;
        this.want.content = res.data.content;
        this.resume =
          "https://gra-1257734071.cos.ap-guangzhou.myqcloud.com/resume-user/" +
          res.data.resume;
        this.want.work1 = res.data.work1;
        this.want.sal1 = res.data.sal1;
      });
    },
    // 选择头像
    beforeImgUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      // console.log(isJPG,isPNG)
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 jpg/png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isPNG || isJPG) && isLt2M;
    },
    // 选择简历
    beforeResumeUpload(file) {
      const isType = [".jpg", ".png", ".pdf"];
      const fileType = file.name.substring(file.name.lastIndexOf("."));
      // 输出文件名
      console.log(file.name);
      // 输出文件格式
      console.log(fileType);
      const isLt2M = file.size / 1024 / 1024 < 2;
      let isOk = true;

      if (isType.indexOf(fileType) === -1) {
        isOk = false;
        this.$message.error("简历格式只能是 jpg/png/pdf 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传简历大小不能超过 2MB !");
      }
      return isOk && isLt2M;
    },
    // 头像修改成功
    su(res, file, fileList) {
      console.log(res);
      console.log(fileList);
      this.image = URL.createObjectURL(file.raw);
      this.$message({
        message: "恭喜你，头像修改成功！",
        type: "success",
      });
    },
    // 简历修改成功
    suR(res, file, fileList) {
      console.log(res,file,fileList);
      this.$message({
        message: "恭喜你，简历信息修改成功！",
        type: "success",
      });
    },
  },
  created() {
    this.getUserInfo();
  },
};
</script>